<template>
  <div class="system-user-dialog-container">
    <el-dialog title="导出" v-model="state.dialog.isShowDialog" width="500">
      <div>
        <div class="title">选择导出字段</div>
        <el-checkbox-group v-model="state.checkedFields">
          <el-checkbox
            v-for="item in state.fields"
            :key="item.key"
            :label="item.key"
            style="width: 80px"
            >{{ item.title }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default"
            >确 认</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="exportDialog">
import { reactive } from 'vue';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['confirm']);

const state = reactive({
  checkedFields: [
    'date',
    'name',
    'material',
    'size',
    'num',
    'unit',
    'unit_price',
    'total_price',
    'remark',
    'creater',
    'approve'
  ],
  fields: [
    {
      title: '日期',
      key: 'date'
    },
    {
      title: '业务内容',
      key: 'name'
    },
    {
      title: '材质',
      width: 140,
      key: 'material'
    },
    {
      title: '规格',
      key: 'size'
    },
    {
      title: '数量',
      width: 60,
      key: 'num'
    },
    {
      title: '单位',
      width: 60,
      key: 'unit'
    },
    {
      title: '单价',
      width: 60,
      key: 'unit_price'
    },
    {
      title: '金额',
      width: 80,
      key: 'total_price'
    },
    {
      title: '备注',
      width: 150,
      key: 'remark'
    },
    {
      title: '经办人',
      key: 'creater'
    },
    {
      title: '审核',
      key: 'approve'
    },
    {
      title: '客户',
      key: 'customer'
    },
    {
      title: '设计师',
      key: 'designer_name'
    },
    {
      title: '单号',
      key: 'project_no'
    }
  ],
  dialog: {
    isShowDialog: false
  }
});

// 打开弹窗
const openDialog = () => {
  state.dialog.isShowDialog = true;
};

// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
  closeDialog();
};

// 提交
const onSubmit = async () => {
  emit('confirm', state.checkedFields);
};

// 暴露变量
defineExpose({
  openDialog,
  closeDialog
});
</script>

<style lang="scss" scoped>
.title {
  color: #000;
  font-size: 14px;
  font-size: 14px;
  margin-bottom: 6px;
  font-weight: bold;
}
</style>
